<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>jq</title>
	<script type="text/javascript" src="../mi/js/jquery-3.1.1.js"></script>
	<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				float: left;
				background: black;
				margin: 15px;
			}
			*{
				margin-top: 0px;
				padding: 0px;
			}
	</style>
	<script type="text/javascript">
			// $(function  () {
			// 	$('.box2').mouseover(function(event) {
			// 	$(this).stop(true,false).animate({width: "538px" ,height:"400px"}, 500);
			// 	$(this).siblings().stop(true,false).animate({'width': "100px"}, 500);

			// });
			
			// $(".box2").hover(function() {
			// 	$(this).stop(true,false).animate({width: "538px" ,height:"400px"}, 500);
			// }, function() {
			// 	$(this).stop(true,false).animate({width: "200px"}, 500);
			// });
			$("box2").mouseover(function() {
				$("box1").css("background-color","red")
			})
				// });


	</script>
</head>
<body>
		<div class="box box1"></div>
		<div class="box box2"></div>
		<div class="box box3"></div>
</body>
</html>